<!--
 * @Date: 2024-12-05 14:03:21
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-12 09:54:17
 * @Description: 数据视图选择弹窗
-->
<template>
  <HpDialog
    v-model="dialogState.visiable"
    class="dbview-dialog"
    title="视图选择"
    top="12vh"
    width="60%"
    height="75%"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <RkTable
      ref="tableRef"
      :="tableAttrs"
      @radioChange="tableRadioChange"
    >
      <template #toolbar_left>
        <div class="field-tag">
          <span>当前选择：</span>
          <span>{{ tableState.selectRow[tableAttrs.keyField] || '请选择'  }}</span>
        </div>
      </template>
      <template #toolbar_right>
        <el-input
          v-model="tableParams.filterName"
          style="width: 200px;"
          clearable
          placeholder="请输入视图名称或视图编码"
          @change="tableSearch"
        />
      </template>
    </RkTable>
  </HpDialog>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { defAxios as request } from '@/utils/http'

import RkTable from '@/components/rk-table';
import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'

const emits = defineEmits([ 'confirm' ])

const dialogState = reactive({
  visiable: false,
})
const handleOpen = (view) => {
  tableState.dbView = view
  dialogState.visiable = true
  setTableSelectRow()
}
const handleReset = () => {
  tableState.dbView = ''
  tableState.cacheData = []
  tableState.selectRow = ''
}
const handleClose = () => {
  handleReset()
  dialogState.visiable = false
}

const handleConfirm = () => {
  const radioRow = tableRef.value.getRadioRecord();
  if (radioRow) {
    emits('confirm', radioRow[tableAttrs.keyField])
    handleReset()
    dialogState.visiable = false
  } else {
    ElMessage.warning('请选择数据视图！');
  }
}

const tableRef = ref(null)
const tableState = reactive ({
  dbView: '', 
  cacheData: [],
  selectRow: ''
})
const tableAttrs = reactive({
  data: [],
  keyField: 'value',
  boxConfig: { mode: 'radio' , fixed: true },
  pagerConfig: false,
  toolbarConfig: { refresh: false },
  columns: [
    { field: 'label', title: '视图名称' },
    { field: 'value', title: '视图编码' },
  ]
})
const tableParams = reactive({
  filterName: ""
})
const tableSearch = () => {
  const filterName = `${tableParams.filterName}`.trim().toLowerCase();
  if (filterName) {
    const filterRE = new RegExp(filterName, 'gi');
    const searchProps = ['label', 'value'];
    const rest = tableAttrs.data.filter(item =>
      searchProps.some(key => `${item[key]}`.toLowerCase().indexOf(filterName) > -1)
    );
    const list = rest.map(row => {
      const item = Object.assign({}, row);
      searchProps.forEach(key => {
        item[key] = `${item[key]}`.replace(filterRE, match => `${match}`);
      });
      return item;
    });
    tableAttrs.data = list;
  } else {
    tableAttrs.data = JSON.parse(JSON.stringify(tableState.cacheData));
  }
  setTableSelectRow()
}
const loadTableData = () => {
  request({
    url: "/prdFormInfo/queryFaspDicdsList",
    method: 'GET'
  }).then(res => {
    if (res.code === 200) {
      tableAttrs.data = res.data
      tableState.cacheData = res.data
    } else {
      tableAttrs.data = []
    }
    setTableSelectRow()
  }).catch(err => {
    tableAttrs.data = []
    console.error(err)
  })
}
const tableRadioChange = (item) => {
  tableState.selectRow = item ? item.row : ''
}
const setTableSelectRow = () => {
  const { selectRow } = tableState
  if (selectRow) {
    tableRef.value.setRadioRow(selectRow)
    setTimeout(() => { tableRef.value.scrollToRow(selectRow) }, 300);
  } else {
    if (!tableState.dbView) return
    nextTick(() => {
      const findSelectRow = tableAttrs.data.find(item => item.value == tableState.dbView)
      if (!findSelectRow) return 
      tableRef.value.setRadioRow(findSelectRow)
      tableState.selectRow = findSelectRow
      setTimeout(() => { tableRef.value.scrollToRow(findSelectRow) }, 300);
    })
  }
}

loadTableData()

defineExpose({
  handleOpen
})

</script>

<style lang="scss" scoped>
.field-tag {
  color: #fff;
  background-color: #3eaf7c;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 600;
  margin-left: -8px;
}
</style>
<style lang="scss">
.dbview-dialog {
  .hp-dialog-body {
    padding-top: 0;
  }
}
</style>